<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部通知" name="first">
        <div>
          <!-- <div class="listItem">
            <div class="checkboxDom"></div>
            <div class="imgContent">
              <img src="../../../assets/img/notice.png">
            </div>
            <div class="textContent">
              <div class="textItem">
                <div class="none" style="display: block;">
                </div>调价公告更新通知
                <div class="noticeTip">
                  <span class="noticeText">new</span>
                </div>
              </div>
              <div class="textItem">2020.02.01魏德米勒调价</div>
              <div class="textItem" style="color:#808080;">
                <span style="margin-right:40px">类型：调价公告</span>
                <span>时间：2020-3-1 00:00:00</span>
              </div>
            </div>
            <div class="btnContent">
              <div class="layui-btn detail" type="调价公告" dataid="484396">查看详情</div>
            </div>
          </div> -->

          <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="询价单" name="second">
        <div id="allContent">
          <!-- <div class="listItem">
            <div class="checkboxDom"></div>
            <div class="imgContent">
              <img src="../../../assets/img/notice.png">
            </div>
            <div class="textContent">
              <div class="textItem">
                <div class="none" style="display: block;">

                </div>调价公告更新通知
                <div class="noticeTip">
                  <span class="noticeText">new</span>
                </div>
              </div>
              <div class="textItem">2020.02.14 魏德米勒调价恢复公告</div>
              <div class="textItem" style="color:#808080;">
                <span style="margin-right:40px">类型：调价公告</span>
                <span>时间：2020-2-15 00:00:00</span>
              </div>
            </div>
            <div class="btnContent">
              <div class="layui-btn detail" type="调价公告" dataid="485221">查看详情</div>
            </div>
          </div> -->
          <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单" name="third">
        <!-- <div class="listItem">
          <div class="checkboxDom"></div>
          <div class="imgContent">
            <img src="../../../assets/img/notice.png">
          </div>
          <div class="textContent">
            <div class="textItem">
              <div class="none" style="display: block;">

              </div>调价公告更新通知
              <div class="noticeTip">
                <span class="noticeText">new</span>
              </div>
            </div>
            <div class="textItem">2020.02.14 魏德米勒调价恢复公告</div>
            <div class="textItem" style="color:#808080;">
              <span style="margin-right:40px">类型：调价公告</span>
              <span>时间：2020-2-15 00:00:00</span>
            </div>
          </div>
          <div class="btnContent">
            <div class="layui-btn detail" type="调价公告" dataid="485221">查看详情</div>
          </div>
        </div> -->
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="调价公告" name="fourth">
        <div id="allContent">
          <!-- <div class="listItem">
            <div class="checkboxDom"></div>
            <div class="imgContent">
              <img src="../../../assets/img/notice.png">
            </div>
            <div class="textContent">
              <div class="textItem">
                <div class="none" style="display: block;">

                </div>调价公告更新通知
                <div class="noticeTip">
                  <span class="noticeText">new</span>
                </div>
              </div>
              <div class="textItem">2020.02.01魏德米勒调价</div>
              <div class="textItem" style="color:#808080;">
                <span style="margin-right:40px">类型：调价公告</span>
                <span>时间：2020-3-1 00:00:00</span>
              </div>
            </div>
            <div class="btnContent">
              <div class="layui-btn detail" type="调价公告" dataid="484396">查看详情</div>
            </div>
          </div> -->
          <!-- <div class="listItem">
            <div class="checkboxDom"></div>
            <div class="imgContent">
              <img src="../../../assets/img/notice.png">
            </div>
            <div class="textContent">
              <div class="textItem">
                <div class="none" style="display: block;">

                </div>调价公告更新通知
                <div class="noticeTip">
                  <span class="noticeText">new</span>
                </div>
              </div>
              <div class="textItem">2020.02.14 魏德米勒调价恢复公告</div>
              <div class="textItem" style="color:#808080;">
                <span style="margin-right:40px">类型：调价公告</span>
                <span>时间：2020-2-15 00:00:00</span>
              </div>
            </div>
            <div class="btnContent">
              <div class="layui-btn detail" type="调价公告" dataid="485221">查看详情</div>
            </div>
          </div> -->
          <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="msgText">共
      <span class="msgCount">13</span>条消息
      <div style="display: inline-block;" class="noreadDom">，
        <span class="noreadCount">0</span>条未读
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rt-news',
  metaInfo: {
    title: '推送消息',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      activeName: 'first',
      hasMod: true
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  position: relative;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
      }
      .el-tabs__active-bar {
        height: 3px;
      }
    }
    .c333 {
      color: #333;
    }
    .mt30 {
        margin-top: 30px;
    }
  }
}
.fl {
    float: left;
    display: inline;
}
.c999 {
    color: #999;
}
.f14 {
    font-size: 14px;
}
.mt10 {
    margin-top: 10px;
}
#allContent {
  padding: 10px;
  .listItem {
    display: flex;
    padding: 30px 0 15px 0;
    border-bottom: 1px solid #eee;
    .imgContent {
      width: 68px;
      margin-left: 15px;
    }
    .textContent {
      flex: 1;
      text-align: left;
      .textItem:nth-child(1) {
        display: flex;
        height: 20px;
      }
      .textItem:nth-child(1) {
        margin-bottom: 8px;
      }
      .textItem {
        margin-bottom: 15px;
      }
    }
    .detail {
      border-radius: 5px;
      background: #4448f8;
      padding-top: 1px;
    }
    .layui-btn {
      font-size: 13px!important;
      height: 35px!important;
      line-height: 35px!important;
      width: 93px;
      display: inline-block;
      height: 38px;
      line-height: 38px;
      padding: 0 18px;
      background-color: #4448f8;
      color: #fff;
      white-space: nowrap;
      text-align: center;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.msgText {
  position: absolute;
  top: 45px;
  right: 30px;
  letter-spacing: 3px;
  font-size: 13px;
  .msgCount {
    color: red;
    margin: 0 5px;
    letter-spacing: 1px;
  }
  .noreadCount {
    color: red;
    margin: 0 5px;
    letter-spacing: 1px;
  }
}
/deep/.el-pagination {
  margin-top: 15px;
}

</style>
